<template>
  <Modal v-model="visible" width="450" title="开票">
    <Form ref="form" :model="form" :rules="rules" :label-width="120" @submit.native.prevent>
      <FormItem label="未开票金额:">{{ $dt.tool.formatterMoney(notInvoicePrice) }}元</FormItem>
      <FormItem label="开票号码:" prop="invoiceCode">
        <Input v-model="form.invoiceCode" placeholder="请输入开票号码" />
      </FormItem>
      <FormItem label="开票日期:" prop="invoiceDate">
        <DatePicker
          v-model="form.invoiceDate"
          type="date"
          @on-change="onChange"
          placeholder="请选择开票日期"
          style="width: 100%"></DatePicker>
      </FormItem>
      <FormItem label="开票金额:" prop="invoiceAmount">
        <Input
          v-model="form.invoiceAmount"
          @on-blur="onBlur"
          type="number"
          number
          placeholder="请输入开票金额" />
      </FormItem>
      <FormItem label="未税金额:" prop="noTaxAmount">
        <Input v-model="form.noTaxAmount" type="number" number placeholder="请输入未税金额" />
      </FormItem>
      <FormItem label="发票凭证上传:" prop="invoiceVoucher">
        <Upload
          ref="upload"
          name="multipartFile"
          :action="upload.reqUrl"
          :headers="upload.headers"
          :data="upload.data"
          multiple
          :show-upload-list="false"
          accept=".jpg, .jpeg, .png, .pdf"
          :max-size="10240"
          :on-exceeded-size="onExceededSize"
          :on-success="onSuccess">
          <Button icon="ios-cloud-upload-outline">上传文件</Button>
        </Upload>
        <div class="file-list">
          <p v-for="(item, index) in form.invoiceVoucher" :key="index">
            <span class="name">{{ item.name }}</span>
            <span class="del" @click="onDel(index)">×</span>
          </p>
        </div>
      </FormItem>
    </Form>

    <div slot="footer">
      <Button type="text" @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import toolMgr from '@/biz/base/tool.js'
  import informationMgr from '@/biz/commission/information.js'

  export default {
    data() {
      const amountValidate = (rule, value, callback) => {
        let reg = /^-{0,1}\d+(\.\d{1,2}){0,1}$/
        if (this.notInvoicePrice >= 0) {
          if (value > this.notInvoicePrice || value < 0) {
            return callback('开票金额不可大于未开票金额，且不可小于0')
          } else if (!reg.test(String(value))) {
            return callback('开票金额保留两位小数')
          }
        } else {
          if (value < this.notInvoicePrice || value > 0) {
            return callback('开票金额不可小于未开票金额，且不可大于0')
          } else if (!reg.test(String(value))) {
            return callback('开票金额保留两位小数')
          }
        }
        callback()
      }
      return {
        visible: false,
        commissionId: '',
        notInvoicePrice: '',
        form: {
          invoiceCode: '',
          invoiceDate: '',
          invoiceAmount: '',
          noTaxAmount: '',
          invoiceVoucher: []
        },
        rules: {
          invoiceCode: [{ required: true, message: '请输入开票号码', trigger: 'blur' }],
          invoiceDate: [{ required: true, message: '请选择开票日期', trigger: 'blur' }],
          invoiceAmount: [
            { required: true, type: 'number', message: '请输入开票金额', trigger: 'blur' },
            { validator: amountValidate, trigger: 'blur' }
          ],
          noTaxAmount: [{ required: true, type: 'number', message: '请输入未税金额', trigger: 'blur' }],
          invoiceVoucher: [{ required: true, message: '请上传发票凭证' }]
        },
        upload: toolMgr.unloadImage(),
        loading: false
      }
    },
    methods: {
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let invoiceVoucher = this.form.invoiceVoucher.map((i) => i.url)
            informationMgr
              .invoicing({
                commissionId: this.commissionId,
                ...this.form,
                invoiceVoucher: invoiceVoucher.join(',')
              })
              .then(() => {
                this.$Message.success('操作成功')
                this.$emit('success')
                this.hide()
              })
          }
        })
      },
      onBlur() {
        let noTaxAmount = (this.form.invoiceAmount / 1.06).toFixed(2)
        this.form.noTaxAmount = Number(noTaxAmount)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        if (res.code == '200') {
          this.form.invoiceVoucher.push({
            url: res.data.imageURL,
            name: file.name
          })
        } else {
          this.$Message.error(res.msg)
        }
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      onDel(idx) {
        this.form.invoiceVoucher.splice(idx, 1)
      },
      onChange(val) {
        this.form.invoiceDate = val
      },
      // 查询未开票金额
      getNotInvoice() {
        informationMgr.notInvoicePrice(this.commissionId).then((res) => {
          this.notInvoicePrice = res
        })
      },
      show(info) {
        this.visible = true
        this.commissionId = info.commissionId
        this.initFrom()
        this.getNotInvoice()
      },
      hide() {
        this.visible = false
        this.initFrom()
      },
      initFrom() {
        this.form = {
          invoiceCode: '',
          invoiceDate: '',
          invoiceAmount: '',
          noTaxAmount: '',
          invoiceVoucher: []
        }
        this.$refs.form.resetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .file-list {
    p {
      margin-right: 12px;
      display: flex;
      align-items: center;
    }
    span {
      cursor: pointer;
    }
    .name {
      color: #3366ff;
      text-decoration: underline;
    }
    .del {
      margin-left: 16px;
      font-size: 18px;
    }
  }
</style>
